<template>
  <div id="firstHome">
    <swiper indicator-dots circular>
      <swiper-item >
        <img src="/static/images/index/shu.png" alt="">
      </swiper-item>
      <swiper-item>
        <img src="/static/images/index/Clown.png" alt="">
      </swiper-item>
      <swiper-item>
        <img src="/static/images/index/iconfontquanzi.png" alt="">
      </swiper-item>  
    </swiper>
    
    <div class="list">
      <ul>
        <li v-for="(grid, index) in grids" :key="grid.id">
          <a href="javascript:void(0)" @click="toJump(grid.title)"> 
            <img :src="grid.src" alt="">
            <p>{{grid.title}}</p>
          </a>
        </li>
      </ul>
    </div>

    <div class="newsList-box">
      <div class="newsList-tab">
        <h3>新闻列表</h3>
        <span @click="toMore">更多></span>
      </div>
      <div class="newsList">
        <ul>
          <li v-for="(news, index) in newsList" :key="index" @click="toNewDetail(news)" >
            <a href="javascript:void(0)"> 
              <p class="title">{{news.title}}</p>
              <!-- <img :src="news.image" alt=""> -->
              <p class="date">{{news.time}}</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import news from '../../../static/news/syxynews.json'
var grids=[
  {id:1,src:'/static/images/home/huodong2.png',title:"活动招募"},
  {id:2,src:'/static/images/home//daka.png',title:"扫描打卡"},
  {id:3,src:'/static/images/home/gonggao.png',title:"公示列表"},
  {id:4,src:'/static/images/home/zuzhi.png ',title:"组织展示"},

]

  export default{
    data(){
      return {
        grids:grids,
        newsList:[]
      }
    },
     mounted() {
       this.newsList = news   

    },
    methods: {
      toMore(){
        wx.navigateTo({
          url:'/pages/more/main'
        })
      },
      toNewDetail(news){
        wx.navigateTo({
          url:'/pages/newDetail/main?news='+ JSON.stringify(news)
        })
      },
      toJump(grid){
        console.log(grid)
        if(grid=='公示列表'){
          wx.switchTab({
            url:'/pages/demand/main'
          })
        }
        if(grid=='活动招募'){
          wx.switchTab({
            url:'/pages/activity/main'
          })
        }
      },
    },
  }
</script>

<style scoped>
#firstHome{
  height: 40%;
  width: 100%;
}
#firstHome swiper{
  height: 100%;
  width: 100%;
}
#firstHome swiper img{
  height: 100%;
  width: 100%;
}

.list{
  width: 100%;
}

.list ul{
  display: flex;
  flex-wrap: wrap;
}

.list ul li{
  width: 25%;
  height: 60px;
  text-align: center;
  font-size: 14px;
  margin-top: 25px;
}

.list ul li a{
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.list ul li a img{
  width: 50%;
  height: 50%;
}

.newsList-box{
  width: 100%;
}

.newsList-box .newsList-tab{
  width: 100%;
  height:50px;
  background: red;
}

.newsList-box .newsList-tab h3{
  float: left;
  margin-left: 20px;
  margin-top:15px;
  
}

.newsList-box .newsList-tab span{
  float: right;
  font-size:15px;
  margin-right:20px;
  margin-top:17px;
}

.newsList-box .newsList{
  width: 85%;
  margin:auto ;
  
}

.newsList-box .newsList ul li{
  margin-top: 23px;
  background: rgb(161, 154, 154);
  box-shadow: -10px 10px rgb(148, 143, 143);
  opacity: .7;
  border-radius: 10px;
}

.newsList-box .newsList ul li .title{
  font-size: 40rpx;

}

.newsList-box .newsList ul li .date{
  font-size: 30rpx;
  padding-left: 178px;
  
}

</style>
